<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>装修管家</title>
		<link rel="stylesheet" type="text/css" href="../css/reset.css" />
		<link rel="stylesheet" type="text/css" href="../css/font-awesome.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/layui.css" />
		<link rel="stylesheet" type="text/css" href="../css/animsition.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/common.css" />
		<link rel="stylesheet" type="text/css" href="../css/qk.css" />
		<link rel="stylesheet" type="text/css" href="../css/main.css" />
	</head>

	<body>
		<div class="searchbox">
			<div class="fl logobox">
				<a href="#"><img src="../img/logo.png" /></a>
			</div>
			<div class="fl downcon">
				<span onclick="down(this)">海口<i class="fa fa-angle-down"></i></span>
				<ul>
					<li>
						<a href="#">文昌</a>
					</li>
					<li>
						<a href="#">文昌</a>
					</li>
					<li>
						<a href="#">文昌</a>
					</li>
					<li>
						<a href="#">文昌</a>
					</li>
					<li>
						<a href="#">文昌</a>
					</li>
				</ul>
			</div>
			<div class="fr search">
				<form>
					<input type="text" placeholder="请搜索：装修/问题/攻略/效果图" onfocus="this.placeholder=''" onblur="this.placeholder='请搜索：装修/问题/攻略/效果图'" />
					<input type="button" value="搜索" />
					<div class="clear"></div>
				</form>
			</div>
			<div class="clear"></div>
		</div>
		<div class="bannerbar local">
			<img src="../img/cal_bg.jpg" class="cal-bg" />
			<div class="navbar">
				<div class="nav">
					<a href="index.html" class="current">首页</a>
					<a href="zx-taocan.html">装修套餐</a>
					<a href="#">装修流程</a>
					<a href="#">装修效果图</a>
					<a href="#">装修学堂</a>
					<a href="#">关于我们</a>
					<span class="fr">联系电话：<em>400-817-0898</em>转<em>666</em></span>
					<div class="clear"></div>
				</div>
			</div>
			<div class="needbox">
				<form class="need layui-form">
					<img src="../img/money.png" alt="" />
					<div class="calbox">
						<div class="fl calcor">
							<p>装修计算器</p>
							<div class="layui-form-item">
								<div class="layui-inline">
									<label class="layui-form-label">所在城市：</label>
									<div class="layui-form-mid layui-word-aux">*</div>
									<div class="layui-input-inline w122">
										<select name="modules" lay-verify="required" lay-search="">
											<option value="0">省/市</option>
											<option value="1">海口</option>
											<option value="2">文昌</option>
											<option value="3">琼海</option>
										</select>
									</div>
									<div class="layui-input-inline w122">
										<select name="modules" lay-verify="required" lay-search="">
											<option value="0"></option>
											<option value="1">海口</option>
											<option value="2">文昌</option>
											<option value="3">琼海</option>
										</select>
									</div>
								</div>
							</div>
							<div class="layui-form-item">
								<div class="layui-inline">
									<label class="layui-form-label">房屋面积：</label>
									<div class="layui-form-mid layui-word-aux">*</div>
									<div class="layui-input-inline w254 area">
										<input type="text" name="title" autocomplete="off" placeholder="输入您的房屋面积" class="layui-input" />
										<div class="layui-form-mid unit">㎡</div>
									</div>
								</div>
							</div>
							<div class="layui-form-item">
								<div class="layui-inline">
									<label class="layui-form-label">房屋户型：</label>
									<div class="layui-form-mid layui-word-aux">*</div>
									<div class="layui-input-block">
										<div class="layui-input-inline w78">
											<select name="modules" lay-verify="required" lay-search="">
												<option value="0">2室</option>
												<option value="1">3室</option>
											</select>
										</div>
										<div class="layui-input-inline w78">
											<select name="modules" lay-verify="required" lay-search="">
												<option value="1">1厅</option>
												<option value="2">2厅</option>
											</select>
										</div>
										<div class="layui-input-inline w78">
											<select name="modules" lay-verify="required" lay-search="">
												<option value="1">1厨</option>
												<option value="2">2厨</option>
											</select>
										</div>
										<div class="layui-input-inline w122">
											<select name="modules" lay-verify="required" lay-search="">
												<option value="1">1卫</option>
												<option value="2">2卫</option>
											</select>
										</div>
										<div class="layui-input-inline w122">
											<select name="modules" lay-verify="required" lay-search="">
												<option value="1">1阳台</option>
												<option value="2">1阳台</option>
											</select>
										</div>
									</div>
								</div>
							</div>
							<div class="layui-form-item">
								<div class="layui-inline">
									<label class="layui-form-label">手机号码：</label>
									<div class="layui-form-mid layui-word-aux">*</div>
									<div class="layui-input-inline w254">
										<input type="text" name="title" autocomplete="off" placeholder="报价结果将发送到您的手机" class="layui-input" />
									</div>
								</div>
							</div>
						</div>
						<div class="fr cal">
							<p>您家的装修预算约<em>?</em>万元</p>
							<div class="data_wrap" style="width: 440px; padding: 10px; overflow: hidden;">
								<div class="animsition" style="position: relative;">
									<span class="start">开始计算</span>
									<div class="qk_wrap">
										<div id="main4" class="my_main"></div>
									</div>
								</div>
							</div>
						</div>
						<div class="clear"></div>
					</div>
				</form>
			</div>
		</div>
		<div class="w1220">
			<div class="process same">
				<img src="../img/title01.png" />
				<div class="proce">
					<a href="#"><img src="../img/icon01.png" /></a>
					<a href="#"><img src="../img/icon02.png" /></a>
					<a href="#"><img src="../img/icon03.png" /></a>
					<a href="#"><img src="../img/icon04.png" /></a>
					<a href="#"><img src="../img/icon05.png" /></a>
					<a href="#"><img src="../img/icon06.png" /></a>
				</div>
			</div>
			<div class="servicebox same">
				<div class="fl bankbox">
					<img src="../img/title02.png" />
					<div class="bankpic">
						<a href="#" class="bank fl"><img src="../img/bank.jpg" /></a>
						<ul class="fl">
							<li>
								<a href="#"><img src="../img/firststep.jpg" /></a>
							</li>
							<li>
								<a href="#"><img src="../img/secondstep.jpg" /></a>
							</li>
							<li>
								<a href="#"><img src="../img/thirdstep.jpg" /></a>
							</li>
							<li>
								<a href="#"><img src="../img/laststep.jpg" /></a>
							</li>
						</ul>
						<div class="clear"></div>
					</div>
				</div>
				<div class="fr rightnow">
					<h1>立即体验<em>装修管家服务</em></h1>
					<p>请填写一下信息，免费提交装修需求</p>
					<form class="layui-form">
						<div class="layui-form-item">
							<div class="layui-inline">
								<div class="layui-input-inline w250 area">
									<input type="text" name="title" autocomplete="off" placeholder="您的称呼" class="layui-input" />
								</div>
							</div>
						</div>
						<div class="layui-form-item">
							<div class="layui-inline">
								<div class="layui-input-inline w250 area">
									<input type="tel" maxlength="11" name="title" autocomplete="off" placeholder="您的手机号" class="layui-input" />
								</div>
							</div>
						</div>
						<div class="layui-form-item">
							<div class="layui-inline">
								<div class="layui-input-inline w95">
									<select name="modules" lay-verify="required" lay-search="">
										<option value="">选择</option>
									</select>
								</div>
								<div class="layui-input-inline w95">
									<select name="modules" lay-verify="required" lay-search="">
										<option value="">区域</option>
									</select>
								</div>
							</div>
						</div>
						<div class="layui-form-item">
							<div class="layui-inline">
								<div class="layui-input-inline w250 area">
									<input type="text" maxlength="10" min="2" name="title" autocomplete="off" placeholder="小区名称2-10个汉子" class="layui-input" />
								</div>
							</div>
						</div>
						<div class="layui-form-item">
							<div class="layui-inline">
								<div class="layui-input-inline w250 area">
									<input type="text" name="title" autocomplete="off" placeholder="面积/整数" class="layui-input" />
								</div>
							</div>
						</div>
						<div class="layui-form-item">
							<div class="layui-inline">
								<div class="layui-input-inline w250 area">
									<input type="text" name="title" autocomplete="off" placeholder="装修预算" class="layui-input" />
								</div>
							</div>
						</div>
						<div class="layui-form-item">
							<div class="layui-inline">
								<div class="layui-input-inline">
									<button class="layui-btn" lay-submit="" lay-filter="demo1">免费发布</button>
								</div>
							</div>
						</div>
					</form>
				</div>
				<div class="clear"></div>
			</div>
			<div class="whatbox">
				<a href="#"><img src="../img/answer.jpg"/></a>
			</div>
			<div class="ensurebox same">
				<div class="ensure fl">
					<img src="../img/title03.png"/>
					<div class="ensure-con">
						<ul>
							<li>
								<img src="../img/one.png"/>
							</li>
							<li>
								<img src="../img/two.png"/>
							</li>
							<li>
								<img src="../img/three.png"/>
							</li>
							<li>
								<img src="../img/four.png"/>
							</li>
							<li>
								<img src="../img/five.png"/>
							</li>
							<li>
								<img src="../img/six.png"/>
							</li>
						</ul>
					</div>
				</div>
				<div class="fr station">
					<h1>最新<em>装修动态</em></h1>
					<div class="list">
						<div class="listtop">
							<span style="width: 54px;">业主</span>
							<span style="width: 78px;">所在小区</span>
							<span style="width: 66px;">装修预算</span>
							<span style="width: 68px;">提交时间</span>
						</div>
						<ul>
							<li>
								<a href="#">
									<span style="width: 54px;">朱女士</span>
									<span style="width: 78px;">华诺国际</span>
									<span style="width: 66px;">0万</span>
									<span style="width: 68px;">2017-12-01</span>
								</a>
							</li>
							<li>
								<a href="#">
									<span style="width: 54px;">朱女士</span>
									<span style="width: 78px;">世纪华庭阳</span>
									<span style="width: 66px;">0万</span>
									<span style="width: 68px;">2017-12-01</span>
								</a>
							</li>
							<li>
								<a href="#">
									<span style="width: 54px;">朱女士</span>
									<span style="width: 78px;">世纪华庭阳</span>
									<span style="width: 66px;">0万</span>
									<span style="width: 68px;">2017-12-01</span>
								</a>
							</li>
							<li>
								<a href="#">
									<span style="width: 54px;">朱女士</span>
									<span style="width: 78px;">世纪华庭阳</span>
									<span style="width: 66px;">0万</span>
									<span style="width: 68px;">2017-12-01</span>
								</a>
							</li>
							<li>
								<a href="#">
									<span style="width: 54px;">朱女士</span>
									<span style="width: 78px;">世纪华庭阳</span>
									<span style="width: 66px;">0万</span>
									<span style="width: 68px;">2017-12-01</span>
								</a>
							</li>
							<li>
								<a href="#">
									<span style="width: 54px;">朱女士</span>
									<span style="width: 78px;">世纪华庭阳</span>
									<span style="width: 66px;">0万</span>
									<span style="width: 68px;">2017-12-01</span>
								</a>
							</li>
							<li>
								<a href="#">
									<span style="width: 54px;">朱女士</span>
									<span style="width: 78px;">世纪华庭阳</span>
									<span style="width: 66px;">0万</span>
									<span style="width: 68px;">2017-12-01</span>
								</a>
							</li>
							<li>
								<a href="#">
									<span style="width: 54px;">朱女士</span>
									<span style="width: 78px;">世纪华庭阳</span>
									<span style="width: 66px;">0万</span>
									<span style="width: 68px;">2017-12-01</span>
								</a>
							</li>
							<li>
								<a href="#">
									<span style="width: 54px;">朱女士</span>
									<span style="width: 78px;">世纪华庭阳</span>
									<span style="width: 66px;">0万</span>
									<span style="width: 68px;">2017-12-01</span>
								</a>
							</li>
							<li>
								<a href="#">
									<span style="width: 54px;">朱女士</span>
									<span style="width: 78px;">世纪华庭阳</span>
									<span style="width: 66px;">0万</span>
									<span style="width: 68px;">2017-12-01</span>
								</a>
							</li>
							<li>
								<a href="#">
									<span style="width: 54px;">朱女士</span>
									<span style="width: 78px;">世纪华庭阳</span>
									<span style="width: 66px;">0万</span>
									<span style="width: 68px;">2017-12-01</span>
								</a>
							</li>
						</ul>
					</div>
				</div>
				<div class="clear"></div>
			</div>
		</div>
		<!--底部-->
		<div class="contactbox">
			<div class="contact">
				<img src="../img/contact_icon.png" class="fl"/>
				<div class="tel fr">
					<span>电话：<em>400-817-0898</em>转<em>666</em></span>
					<span>24小时服务邮箱：<em>1837504289@qq.com</em></span>
				</div>
				<div class="clear"></div>
			</div>
		</div>
		<div class="footerbox">
			<div class="footer">
				<div class="fl place">
					<p>海口总部：海口市龙昆南路金霖花园别墅入口C栋二楼</p>
					<p>海口西海岸分店：海口市西海岸长滨四路海长流3期铺面</p>
					<p>海口绿地城分店：新大洲大道681号海南绿地城营销中心，前往100米邻里中心一楼</p>
					<p>三亚分店：三亚育秀路3-1号东方广场商业街（三亚站对面）2楼</p>
					<p>琼海分店：琼海市银海路大印经典对面我房装饰</p>
					<p>儋州分店：儋州市那大镇兰洋北路恒大名都一期25栋106商铺</p>
					<p>老城分部：澄迈县老城镇南海大道60号店铺（海之梦大酒店旁）</p>
					<p>云南我房旅居房地产经纪有限公司 地址:云南省昆明市五华区学府路金鼎科技园18号平台B座404室</p>
				</div>
				<div class="telbox fl">
					<ul>
						<li>
							<span>私人装修管家：黎明暖18789540187</span>
							<img src="../img/tel.jpg"/>
						</li>
						<li>
							<span>私人装修管家：王章婷15120895596</span>
							<img src="../img/tel.jpg"/>
						</li>
						<li>
							<span>私人装修管家：王盛文13876800367</span>
							<img src="../img/tel.jpg"/>
						</li>
					</ul>
				</div>
				<div class="clear"></div>
			</div>
		</div>
		<script src="../js/jquery.min.js"></script>
		<script src="../js/layui.js"></script>
		<script type="text/javascript">
			$('.process .proce a:last-of-type').css('margin-right', '0');
			$('.ensure-con ul li:nth-of-type(2n+2)').css('float',"right");
			$(function() {
				$("div.list").myScroll({
					speed: 40,
					rowHeight: 30
				});
			});
		</script>
		<script type="text/javascript">
			layui.use('form', function() {
				var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
			});
		</script>
		<!--计算装修预算-->
		<script src="../js/jquery-ui.min.js"></script>
		<script src="../js/select-widget-min.js"></script>
		<script src="../js/jquery.animsition.min.js"></script>
		<script src="../js/echarts.js"></script>
		<script src="../js/common.js"></script>
		<script>
			//开始计算按钮提交信息
			$('.start').on('click', function() {
				layer.alert('已提交')
			});
			$(document).ready(function() {
				//初始化切换
				$(".animsition").animsition({
					inClass: 'fade-in-right',
					outClass: 'fade-out',
					inDuration: 1500,
					outDuration: 800,
					linkElement: '.animsition-link',
					// e.g. linkElement   :   'a:not([target="_blank"]):not([href^=#])'
					loading: true,
					loadingParentElement: 'body', //animsition wrapper element
					loadingClass: 'animsition-loading',
					unSupportCss: ['animation-duration',
						'-webkit-animation-duration',
						'-o-animation-duration'
					],
					//"unSupportCss" option allows you to disable the "animsition" in case the css property in the array is not supported by your browser.
					//The default setting is to disable the "animsition" in a browser that does not support "animation-duration".
					overlay: false,
					overlayClass: 'animsition-overlay-slide',
					overlayParentElement: 'body'
				});
				// 路径配置
				require.config({
					paths: {
						echarts: 'http://echarts.baidu.com/build/dist'
					}
				});
				// 使用
				require(
					[
						'echarts',
						'echarts/chart/bar',
						'echarts/chart/line',
						'echarts/chart/pie' // 使用柱状图就加载bar模块，按需加载
					],
					function(ec) {
						// 基于准备好的dom，初始化echarts图表
						var myChart4 = ec.init(document.getElementById('main4'), 'macarons');
						var option4 = {
							color: [
								'#74c3fe', '#02ad9e', '#ffc75a', '#fbc4b0'
							],
							tooltip: {
								show: false,
								trigger: 'item',
								formatter: "{a} <br/>{b} : {c} ({d}%)"
							},
							legend: {
								show: false,
								orient: 'vertical',
								x: 'right',
								y: 'center',
								data: ['材料费', '治理甲醛费', '设计费', '人工费']
							},
							toolbox: {
								show: false,
								feature: {
									mark: {
										show: true
									},
									dataView: {
										show: true,
										readOnly: false
									},
									magicType: {
										show: true,
										type: ['pie', 'funnel'],
										option: {
											funnel: {
												x: '25%',
												width: '50%',
												funnelAlign: 'center',
												max: 1548
											}
										}
									},
									restore: {
										show: true
									},
									saveAsImage: {
										show: true
									}
								}
							},
							calculable: false,
							series: [{
								type: 'pie',
								center: ['50%', '50%'],
								radius: ['28%', '70%'],
								startAngle: 135,
								itemStyle: {
									normal: {
										label: {
											show: true,
											position: 'outer',
											formatter: "{b}\n?",
											textStyle: {
												fontSize: '15'
											}
										},
										labelLine: {
											show: true,
											length:10
										}
									},
									emphasis: {
										label: {
											show: false,
											position: 'inner',
											formatter: "{b}\n?",
											textStyle: {
												fontSize: '15'
												
											}
										}
									}
								},
								data: [{
									value: 20000,
									name: '材料费'
								}, {
									value: 10000,
									name: '治理甲醛费'
								}, {
									value: 5400,
									name: '设计费'
								}, {
									value: 8000,
									name: '人工费'
								}]
							}]
						};
						// 为echarts对象加载数据 
						myChart4.setOption(option4);
					}
				);
			});
		</script>
	</body>

</html>